<template>
	<view class="">
		<van-calendar :value="date" @select="select" :min-date="minDate" :color="color" :poppable="false"
			:show-confirm="false" :show-title="false" :style="{ height: height }" />
		<view class="arrow" @click="goFold" v-if="height != '200px'">
			<u-image width="66rpx" height="24rpx" :src="up"></u-image>
		</view>
		<view class="arrow" @click="goFold" v-if="height != '400px'">
			<u-image width="66rpx" height="24rpx" :src="fold"></u-image>
		</view>
	</view>

	<!-- <u-image :src="show"  height="24rpx" ></u-image> -->
</template>

<script>
	//emit chooseDay   //当前所选日期
	import Vue from 'vue';
	import {
		Calendar
	} from 'vant';
	import '@/node_modules/vant/lib/calendar/index.css';
	Vue.use(Calendar);
	export default {
		props: {
			color: {
				default: '#4DC0D9',
				required: false
			}
		},
		data() {
			return {
				date: '',
				minDate: new Date(2022, 0, 1),
				height: '200px',
				up: require('@/static/icon/show_cal.png'),
				fold: require('@/static/icon/fold_cal.png'),
				//maxDate: new Date(2025, 0, 31),
			}
		},
		mounted() {
			// setTimeout(()=>{
			// 	document.addEventListener('DOMContentLoaded', function() {
			// 	  var subtitle = document.querySelector('.van-calendar__header-subtitle');  
			// 	  var weekdays = document.querySelector('.van-calendar__weekdays');  
			// 	  if (subtitle && weekdays) {  
			// 	    // 插入weekdays到subtitle前面  
			// 	    subtitle.parentNode.insertBefore(weekdays, subtitle);  
			// 	  }  
			// 	});
			// },1000)
		},
		methods: {
			goFold() {
				this.height == '200px' ? this.height = '400px' : this.height = '200px'
			},
			select(day) {
				const year = day.getFullYear()
				const month = day.getMonth() + 1;
				const date = day.getDate();
				const fullTime = `${year}-${month}-${date}`
				this.$emit('chooseDay',fullTime)
				console.log(fullTime);
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .title {
	// 	color: $u-type-primary;
	// 	text-align: center;
	// 	padding: 20rpx 0 0 0;
	// }
	.arrow {
		height: 60rpx;
		display: flex;
		justify-content: center;
	}

	::v-deep .van-calendar__header {
		display: flex !important;
		flex-direction: column !important;
	}

	::v-deep .van-calendar__weekdays {
		order: 1 !important;
		/* 将其移动到上面 */
	}

	::v-deep .van-calendar__weekday {
		font-size: 34rpx !important;
	}

	::v-deep .van-calendar__header-subtitle {
		order: 2 !important;
		font-size: 34rpx !important;
		/* 将其移动到下面 */
	}

	::v-deep .van-calendar__weekdays .van-calendar__weekday:first-child {
		color: red;
	}

	::v-deep .van-calendar__month-title {
		font-size: 34rpx !important;
	}

	::v-deep .van-calendar__weekdays .van-calendar__weekday:last-child {
		color: red;
	}

	::v-deep .van-calendar__selected-day {
		border-radius: 50% !important;
	}
</style>